<template>
  <div
    class="hall"
    v-loading.fullscreen.lock="loading"
    fullscreen="false"
    element-loading-text="加载中"
    element-loading-background="rgba(0, 0, 0, 0.2)"
    element-loading-spinner="el-icon-loading"
  >
    <div class="adduser">
      <div class="add-box">
        <span style="font-size:18px;">游戏大厅信息</span>
      </div>
      <el-dialog title="修改大厅信息" :visible.sync="dialogFormVisible">
        <el-form :model="editHallInfo" :rules="rules" ref="agent">
          <el-form-item label="游戏公告标题:" prop="bulletinTitle" :label-width="formLabelWidth">
            <el-input v-model="editHallInfo.bulletinTitle" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="游戏公告:" prop="bulletin" :label-width="formLabelWidth">
            <el-input type="text" v-model="editHallInfo.bulletin" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="hotline" :label-width="formLabelWidth">
            <el-input type="text" v-model="editHallInfo.hotline" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="微信号:" prop="wechatid" :label-width="formLabelWidth">
            <el-input type="text" v-model="editHallInfo.wechatid" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="跑马灯信息:" prop="rollNotice" :label-width="formLabelWidth">
            <el-input type="text" v-model="editHallInfo.rollNotice" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="modifyHallInfo()">修改</el-button>
        </div>
      </el-dialog>
      <div class="table-box">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          border
          :header-cell-style="{
            /* 样式名称 ： 属性 */
            'font-weight':'bold',
            'text-align':'center',
             'color':'#4d5259'
            }"
          :cell-style="{
            /* 样式名称 ： 属性 */
            'text-align': 'center',
            }"
        >
          <el-table-column prop="id" label="编号" width="60"></el-table-column>
          <el-table-column prop="bulletinTitle" label="游戏公告标题" width="180"></el-table-column>
          <el-table-column prop="bulletin" label="游戏公告" width="220"></el-table-column>
          <el-table-column prop="hotline" label="手机号" width="150"></el-table-column>
          <el-table-column prop="wechatid" label="微信号" width="150"></el-table-column>
          <el-table-column prop="rollNotice" label="跑马灯信息" width="220"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">
                <!-- <i class="iconfont">&#xe661;</i> -->
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.hall {
  background-color: #f5f6fa;
  padding: 15px;
  .adduser {
    .el-input__inner {
      width: 350px;
    }
    overflow: hidden;
    background-color: #fff;
    padding: 15px;
    .add-box {
      float: left;
    }
    .input-box {
      float: right;
    }
    .table-box {
      margin-top: 75px;
    }
  }
}
</style>

<script>
import { showTips } from "@/utils";
import { getHallInfo, modifyHallInfo } from "@/api";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      hallInfo: {},
      loading: true,
      editHallInfo: {},
      tableData: [],
      formLabelWidth: "120px",
      rules: {
        bulletinTitle: [
          { required: true, message: "游戏公告标题", trigger: "blur" },
          { min: 1, max: 18, message: "长度在 1 到 18 个字符", trigger: "blur" }
        ],
        bulletin: [
          { required: true, message: "请输入游戏公告", trigger: "blur" },
          {
            min: 6,
            max: 200,
            message: "长度在 1 到 2000个字符",
            trigger: "blur"
          }
        ],
        hotline: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        wechatid: [
          { required: true, message: "请输入微信号", trigger: "blur" },
          { min: 6, max: 18, message: "请输入正确的微信号", trigger: "blur" }
        ],
        rollNotice: [
          { required: true, message: "请输入跑马灯信息", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "请输入正确的跑马灯信息",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleEdit(hallInfo) {
      this.editHallInfo = Object.assign({}, this.editHallInfo, hallInfo);
      this.dialogFormVisible = true;
    },
    getHallInfoMation() {
      getHallInfo().then(res => {
        if (res.code == 200) {
          this.tableData.push(res.data);
        }
        this.loading = false;
      });
    },
    modifyHallInfo() {
      this.loading = true;
      modifyHallInfo(this.editHallInfo).then(res => {
        if (res.code == 200) {
          //编辑成功
          this.tableData = [];
          this.dialogFormVisible = false;
          this.getHallInfoMation();
          showTips("success", "修改成功");
        }
        this.loading = false;
      });
    }
  },
  mounted() {
    this.getHallInfoMation();
  }
};
</script>

 